<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>control</title>
		<link rel="stylesheet" type="text/css" href="css/ol.css" />
		<style type="text/css">
			#map {
				border: 0px;
				margin: 0px;
				padding: 0px;
				width: 100%;
				height: 100%;
				font-size: 13px;
			}
			#location {
				position: absolute;
				bottom: 10px;
				left: 45%;
				font-weight: bold;
				z-index: 99;
			}
			#switch {
				position: absolute;
				right: 20pt;
				top: 40pt;
				z-index: 999;
			}
			#rotation {
				position: absolute;
				top: 10px;
				left: 45%;
				font-weight: bold;
				z-index: 99;
			}
			.ol-zoomslider {
				background: #d0e5f5;
				width: 20px;
			}
			.zoom-to-extent {
				position: absolute;
				top: 5pt;
				left: 28pt;
			}
			.map-rotate {
				position: absolute;
				top: 5pt;
				left: 45%;
			}
		</style>
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/ol-debug.js"></script>
		<script type="text/javascript">
			function init() {
				var controls = new Array();
				//鼠标位置  
				var mousePositionControl = new ol.control.MousePosition({
					target: document.getElementById('location'),
					coordinateFormat: ol.coordinate.createStringXY(5), //保留5位小数  
					undefinedHTML: ''
				});
				controls.push(mousePositionControl);
				//缩放至范围  
				var zoomToExtentControl = new ol.control.ZoomToExtent({
					tipLabel: "全图",
					label:"normal",
				});
				controls.push(zoomToExtentControl); 
				//比例尺
				var scaleLineControl = new ol.control.ScaleLine({
				});
				controls.push(scaleLineControl);
				//全图  
				var fullScreenControl = new ol.control.FullScreen({});
				controls.push(fullScreenControl);
				//缩放控件  
				var zoomSliderControl = new ol.control.ZoomSlider({
				});
				controls.push(zoomSliderControl);
				var rotate = new ol.control.Rotate({
					//              label:"↑",  
					tipLabel: "重置",
					target: document.getElementById('rotation'),
					autoHide: false
				});
				controls.push(rotate);
				var map = new ol.Map({
					layers: [
						new ol.layer.Tile({
							source: new ol.source.OSM(),
						})
					],
					target: 'map',
					controls: ol.control.defaults({
						attribution: false
					}).extend(controls),
					view: new ol.View({
						center: [0, 0],
						zoom: 2
					})
				});
				/*var coord ;
				map.on("singleclick",function(evt){
					console.log(evt);
					coord = evt.coordinate;
					map.getView().setCenter(coord);
					var pixel = map.getPixelFromCoordinate(coord);
					$('#text').css({top:pixel[1]+'px',left:pixel[0]+'px'});
				});
				map.on("mousewheel",function(evt){
					
					var pixel = map.getPixelFromCoordinate(coord);
					console.log(pixel);
					console.log(map.getEventPixel(event));
					console.log(coord);
					$('#text').css({top:pixel[1]+'px',left:pixel[0]+'px'});
				});*/
				
				$("#setRotate").on("click", function() {
					var angle = $("#rotate").val();
					map.getView().setRotation(angle);
				});
			}
		</script>
	</head>

	<body onLoad="init()">
		<div class="layer-change-switch" id="switch">
			<div id="slider">
				<input id="rotate" type="text" value="-45" maxlength="10" style="width: 50px;" />
				<button id="setRotate">旋转</button>
			</div>
		</div>
		<div id="text" style="width:50px;height: 30px; background-color:red;position: fixed;top:100px;z-index: 2;">
			teest
		</div>
		<div id="map">
			<div id="rotation"></div>
			<div id="location">坐标：</div>
		</div>
	</body>

</html>